<!doctype html>
<html>
<head>
<meta charset='UTF-8'><meta name='viewport' content='width=device-width initial-scale=1'>
<title>GuideBook</title><style type='text/css'>html {overflow-x: initial !important;}:root { --bg-color:#ffffff; --text-color:#333333; --select-text-bg-color:#B5D6FC; --select-text-font-color:auto; --monospace:"Lucida Console",Consolas,"Courier",monospace; }
html { font-size: 14px; background-color: var(--bg-color); color: var(--text-color); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
body { margin: 0px; padding: 0px; height: auto; bottom: 0px; top: 0px; left: 0px; right: 0px; font-size: 1rem; line-height: 1.42857; overflow-x: hidden; background: inherit; tab-size: 4; }
iframe { margin: auto; }
a.url { word-break: break-all; }
a:active, a:hover { outline: 0px; }
.in-text-selection, ::selection { text-shadow: none; background: var(--select-text-bg-color); color: var(--select-text-font-color); }
#write { margin: 0px auto; height: auto; width: inherit; word-break: normal; overflow-wrap: break-word; position: relative; white-space: normal; overflow-x: visible; padding-top: 40px; }
#write.first-line-indent p { text-indent: 2em; }
#write.first-line-indent li p, #write.first-line-indent p * { text-indent: 0px; }
#write.first-line-indent li { margin-left: 2em; }
.for-image #write { padding-left: 8px; padding-right: 8px; }
body.typora-export { padding-left: 30px; padding-right: 30px; }
.typora-export .footnote-line, .typora-export li, .typora-export p { white-space: pre-wrap; }
.typora-export .task-list-item input { pointer-events: none; }
@media screen and (max-width: 500px) {
  body.typora-export { padding-left: 0px; padding-right: 0px; }
  #write { padding-left: 20px; padding-right: 20px; }
  .CodeMirror-sizer { margin-left: 0px !important; }
  .CodeMirror-gutters { display: none !important; }
}
#write li > figure:last-child { margin-bottom: 0.5rem; }
#write ol, #write ul { position: relative; }
img { max-width: 100%; vertical-align: middle; image-orientation: from-image; }
button, input, select, textarea { color: inherit; font: inherit; }
input[type="checkbox"], input[type="radio"] { line-height: normal; padding: 0px; }
*, ::after, ::before { box-sizing: border-box; }
#write h1, #write h2, #write h3, #write h4, #write h5, #write h6, #write p, #write pre { width: inherit; }
#write h1, #write h2, #write h3, #write h4, #write h5, #write h6, #write p { position: relative; }
p { line-height: inherit; }
h1, h2, h3, h4, h5, h6 { break-after: avoid-page; break-inside: avoid; orphans: 4; }
p { orphans: 4; }
h1 { font-size: 2rem; }
h2 { font-size: 1.8rem; }
h3 { font-size: 1.6rem; }
h4 { font-size: 1.4rem; }
h5 { font-size: 1.2rem; }
h6 { font-size: 1rem; }
.md-math-block, .md-rawblock, h1, h2, h3, h4, h5, h6, p { margin-top: 1rem; margin-bottom: 1rem; }
.hidden { display: none; }
.md-blockmeta { color: rgb(204, 204, 204); font-weight: 700; font-style: italic; }
a { cursor: pointer; }
sup.md-footnote { padding: 2px 4px; background-color: rgba(238, 238, 238, 0.7); color: rgb(85, 85, 85); border-radius: 4px; cursor: pointer; }
sup.md-footnote a, sup.md-footnote a:hover { color: inherit; text-transform: inherit; text-decoration: inherit; }
#write input[type="checkbox"] { cursor: pointer; width: inherit; height: inherit; }
figure { overflow-x: auto; margin: 1.2em 0px; max-width: calc(100% + 16px); padding: 0px; }
figure > table { margin: 0px; }
tr { break-inside: avoid; break-after: auto; }
thead { display: table-header-group; }
table { border-collapse: collapse; border-spacing: 0px; width: 100%; overflow: auto; break-inside: auto; text-align: left; }
table.md-table td { min-width: 32px; }
.CodeMirror-gutters { border-right: 0px; background-color: inherit; }
.CodeMirror-linenumber { user-select: none; }
.CodeMirror { text-align: left; }
.CodeMirror-placeholder { opacity: 0.3; }
.CodeMirror pre { padding: 0px 4px; }
.CodeMirror-lines { padding: 0px; }
div.hr:focus { cursor: none; }
#write pre { white-space: pre-wrap; }
#write.fences-no-line-wrapping pre { white-space: pre; }
#write pre.ty-contain-cm { white-space: normal; }
.CodeMirror-gutters { margin-right: 4px; }
.md-fences { font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; overflow: visible; white-space: pre; background: inherit; position: relative !important; }
.md-diagram-panel { width: 100%; margin-top: 10px; text-align: center; padding-top: 0px; padding-bottom: 8px; overflow-x: auto; }
#write .md-fences.mock-cm { white-space: pre-wrap; }
.md-fences.md-fences-with-lineno { padding-left: 0px; }
#write.fences-no-line-wrapping .md-fences.mock-cm { white-space: pre; overflow-x: auto; }
.md-fences.mock-cm.md-fences-with-lineno { padding-left: 8px; }
.CodeMirror-line, twitterwidget { break-inside: avoid; }
.footnotes { opacity: 0.8; font-size: 0.9rem; margin-top: 1em; margin-bottom: 1em; }
.footnotes + .footnotes { margin-top: 0px; }
.md-reset { margin: 0px; padding: 0px; border: 0px; outline: 0px; vertical-align: top; background: 0px 0px; text-decoration: none; text-shadow: none; float: none; position: static; width: auto; height: auto; white-space: nowrap; cursor: inherit; -webkit-tap-highlight-color: transparent; line-height: normal; font-weight: 400; text-align: left; box-sizing: content-box; direction: ltr; }
li div { padding-top: 0px; }
blockquote { margin: 1rem 0px; }
li .mathjax-block, li p { margin: 0.5rem 0px; }
li { margin: 0px; position: relative; }
blockquote > :last-child { margin-bottom: 0px; }
blockquote > :first-child, li > :first-child { margin-top: 0px; }
.footnotes-area { color: rgb(136, 136, 136); margin-top: 0.714rem; padding-bottom: 0.143rem; white-space: normal; }
#write .footnote-line { white-space: pre-wrap; }
@media print {
  body, html { border: 1px solid transparent; height: 99%; break-after: avoid; break-before: avoid; font-variant-ligatures: no-common-ligatures; }
  #write { margin-top: 0px; padding-top: 0px; border-color: transparent !important; }
  .typora-export * { -webkit-print-color-adjust: exact; }
  html.blink-to-pdf { font-size: 13px; }
  .typora-export #write { break-after: avoid; }
  .typora-export #write::after { height: 0px; }
  .is-mac table { break-inside: avoid; }
}
.footnote-line { margin-top: 0.714em; font-size: 0.7em; }
a img, img a { cursor: pointer; }
pre.md-meta-block { font-size: 0.8rem; min-height: 0.8rem; white-space: pre-wrap; background: rgb(204, 204, 204); display: block; overflow-x: hidden; }
p > .md-image:only-child:not(.md-img-error) img, p > img:only-child { display: block; margin: auto; }
#write.first-line-indent p > .md-image:only-child:not(.md-img-error) img { left: -2em; position: relative; }
p > .md-image:only-child { display: inline-block; width: 100%; }
#write .MathJax_Display { margin: 0.8em 0px 0px; }
.md-math-block { width: 100%; }
.md-math-block:not(:empty)::after { display: none; }
[contenteditable="true"]:active, [contenteditable="true"]:focus, [contenteditable="false"]:active, [contenteditable="false"]:focus { outline: 0px; box-shadow: none; }
.md-task-list-item { position: relative; list-style-type: none; }
.task-list-item.md-task-list-item { padding-left: 0px; }
.md-task-list-item > input { position: absolute; top: 0px; left: 0px; margin-left: -1.2em; margin-top: calc(1em - 10px); border: none; }
.math { font-size: 1rem; }
.md-toc { min-height: 3.58rem; position: relative; font-size: 0.9rem; border-radius: 10px; }
.md-toc-content { position: relative; margin-left: 0px; }
.md-toc-content::after, .md-toc::after { display: none; }
.md-toc-item { display: block; color: rgb(65, 131, 196); }
.md-toc-item a { text-decoration: none; }
.md-toc-inner:hover { text-decoration: underline; }
.md-toc-inner { display: inline-block; cursor: pointer; }
.md-toc-h1 .md-toc-inner { margin-left: 0px; font-weight: 700; }
.md-toc-h2 .md-toc-inner { margin-left: 2em; }
.md-toc-h3 .md-toc-inner { margin-left: 4em; }
.md-toc-h4 .md-toc-inner { margin-left: 6em; }
.md-toc-h5 .md-toc-inner { margin-left: 8em; }
.md-toc-h6 .md-toc-inner { margin-left: 10em; }
@media screen and (max-width: 48em) {
  .md-toc-h3 .md-toc-inner { margin-left: 3.5em; }
  .md-toc-h4 .md-toc-inner { margin-left: 5em; }
  .md-toc-h5 .md-toc-inner { margin-left: 6.5em; }
  .md-toc-h6 .md-toc-inner { margin-left: 8em; }
}
a.md-toc-inner { font-size: inherit; font-style: inherit; font-weight: inherit; line-height: inherit; }
.footnote-line a:not(.reversefootnote) { color: inherit; }
.md-attr { display: none; }
.md-fn-count::after { content: "."; }
code, pre, samp, tt { font-family: var(--monospace); }
kbd { margin: 0px 0.1em; padding: 0.1em 0.6em; font-size: 0.8em; color: rgb(36, 39, 41); background: rgb(255, 255, 255); border: 1px solid rgb(173, 179, 185); border-radius: 3px; box-shadow: rgba(12, 13, 14, 0.2) 0px 1px 0px, rgb(255, 255, 255) 0px 0px 0px 2px inset; white-space: nowrap; vertical-align: middle; }
.md-comment { color: rgb(162, 127, 3); opacity: 0.8; font-family: var(--monospace); }
code { text-align: left; vertical-align: initial; }
a.md-print-anchor { white-space: pre !important; border-width: initial !important; border-style: none !important; border-color: initial !important; display: inline-block !important; position: absolute !important; width: 1px !important; right: 0px !important; outline: 0px !important; background: 0px 0px !important; text-decoration: initial !important; text-shadow: initial !important; }
.md-inline-math .MathJax_SVG .noError { display: none !important; }
.html-for-mac .inline-math-svg .MathJax_SVG { vertical-align: 0.2px; }
.md-math-block .MathJax_SVG_Display { text-align: center; margin: 0px; position: relative; text-indent: 0px; max-width: none; max-height: none; min-height: 0px; min-width: 100%; width: auto; overflow-y: hidden; display: block !important; }
.MathJax_SVG_Display, .md-inline-math .MathJax_SVG_Display { width: auto; margin: inherit; display: inline-block !important; }
.MathJax_SVG .MJX-monospace { font-family: var(--monospace); }
.MathJax_SVG .MJX-sans-serif { font-family: sans-serif; }
.MathJax_SVG { display: inline; font-style: normal; font-weight: 400; line-height: normal; zoom: 90%; text-indent: 0px; text-align: left; text-transform: none; letter-spacing: normal; word-spacing: normal; overflow-wrap: normal; white-space: nowrap; float: none; direction: ltr; max-width: none; max-height: none; min-width: 0px; min-height: 0px; border: 0px; padding: 0px; margin: 0px; }
.MathJax_SVG * { transition: none 0s ease 0s; }
.MathJax_SVG_Display svg { vertical-align: middle !important; margin-bottom: 0px !important; margin-top: 0px !important; }
.os-windows.monocolor-emoji .md-emoji { font-family: "Segoe UI Symbol", sans-serif; }
.md-diagram-panel > svg { max-width: 100%; }
[lang="flow"] svg, [lang="mermaid"] svg { max-width: 100%; height: auto; }
[lang="mermaid"] .node text { font-size: 1rem; }
table tr th { border-bottom: 0px; }
video { max-width: 100%; display: block; margin: 0px auto; }
iframe { max-width: 100%; width: 100%; border: none; }
.highlight td, .highlight tr { border: 0px; }
svg[id^="mermaidChart"] { line-height: 1em; }
mark { background: rgb(255, 255, 0); color: rgb(0, 0, 0); }
.md-html-inline .md-plain, .md-html-inline strong, mark .md-inline-math, mark strong { color: inherit; }
mark .md-meta { color: rgb(0, 0, 0); opacity: 0.3 !important; }
@media print {
  .typora-export h1, .typora-export h2, .typora-export h3, .typora-export h4, .typora-export h5, .typora-export h6 { break-inside: avoid; }
  .typora-export h1::after, .typora-export h2::after, .typora-export h3::after, .typora-export h4::after, .typora-export h5::after, .typora-export h6::after { content: ""; display: block; height: 100px; margin-bottom: -100px; }
}


.CodeMirror { height: auto; }
.CodeMirror.cm-s-inner { background: inherit; }
.CodeMirror-scroll { overflow: auto hidden; z-index: 3; }
.CodeMirror-gutter-filler, .CodeMirror-scrollbar-filler { background-color: rgb(255, 255, 255); }
.CodeMirror-gutters { border-right: 1px solid rgb(221, 221, 221); background: inherit; white-space: nowrap; }
.CodeMirror-linenumber { padding: 0px 3px 0px 5px; text-align: right; color: rgb(153, 153, 153); }
.cm-s-inner .cm-keyword { color: rgb(119, 0, 136); }
.cm-s-inner .cm-atom, .cm-s-inner.cm-atom { color: rgb(34, 17, 153); }
.cm-s-inner .cm-number { color: rgb(17, 102, 68); }
.cm-s-inner .cm-def { color: rgb(0, 0, 255); }
.cm-s-inner .cm-variable { color: rgb(0, 0, 0); }
.cm-s-inner .cm-variable-2 { color: rgb(0, 85, 170); }
.cm-s-inner .cm-variable-3 { color: rgb(0, 136, 85); }
.cm-s-inner .cm-string { color: rgb(170, 17, 17); }
.cm-s-inner .cm-property { color: rgb(0, 0, 0); }
.cm-s-inner .cm-operator { color: rgb(152, 26, 26); }
.cm-s-inner .cm-comment, .cm-s-inner.cm-comment { color: rgb(170, 85, 0); }
.cm-s-inner .cm-string-2 { color: rgb(255, 85, 0); }
.cm-s-inner .cm-meta { color: rgb(85, 85, 85); }
.cm-s-inner .cm-qualifier { color: rgb(85, 85, 85); }
.cm-s-inner .cm-builtin { color: rgb(51, 0, 170); }
.cm-s-inner .cm-bracket { color: rgb(153, 153, 119); }
.cm-s-inner .cm-tag { color: rgb(17, 119, 0); }
.cm-s-inner .cm-attribute { color: rgb(0, 0, 204); }
.cm-s-inner .cm-header, .cm-s-inner.cm-header { color: rgb(0, 0, 255); }
.cm-s-inner .cm-quote, .cm-s-inner.cm-quote { color: rgb(0, 153, 0); }
.cm-s-inner .cm-hr, .cm-s-inner.cm-hr { color: rgb(153, 153, 153); }
.cm-s-inner .cm-link, .cm-s-inner.cm-link { color: rgb(0, 0, 204); }
.cm-negative { color: rgb(221, 68, 68); }
.cm-positive { color: rgb(34, 153, 34); }
.cm-header, .cm-strong { font-weight: 700; }
.cm-del { text-decoration: line-through; }
.cm-em { font-style: italic; }
.cm-link { text-decoration: underline; }
.cm-error { color: red; }
.cm-invalidchar { color: red; }
.cm-constant { color: rgb(38, 139, 210); }
.cm-defined { color: rgb(181, 137, 0); }
div.CodeMirror span.CodeMirror-matchingbracket { color: rgb(0, 255, 0); }
div.CodeMirror span.CodeMirror-nonmatchingbracket { color: rgb(255, 34, 34); }
.cm-s-inner .CodeMirror-activeline-background { background: inherit; }
.CodeMirror { position: relative; overflow: hidden; }
.CodeMirror-scroll { height: 100%; outline: 0px; position: relative; box-sizing: content-box; background: inherit; }
.CodeMirror-sizer { position: relative; }
.CodeMirror-gutter-filler, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-vscrollbar { position: absolute; z-index: 6; display: none; }
.CodeMirror-vscrollbar { right: 0px; top: 0px; overflow: hidden; }
.CodeMirror-hscrollbar { bottom: 0px; left: 0px; overflow: hidden; }
.CodeMirror-scrollbar-filler { right: 0px; bottom: 0px; }
.CodeMirror-gutter-filler { left: 0px; bottom: 0px; }
.CodeMirror-gutters { position: absolute; left: 0px; top: 0px; padding-bottom: 30px; z-index: 3; }
.CodeMirror-gutter { white-space: normal; height: 100%; box-sizing: content-box; padding-bottom: 30px; margin-bottom: -32px; display: inline-block; }
.CodeMirror-gutter-wrapper { position: absolute; z-index: 4; background: 0px 0px !important; border: none !important; }
.CodeMirror-gutter-background { position: absolute; top: 0px; bottom: 0px; z-index: 4; }
.CodeMirror-gutter-elt { position: absolute; cursor: default; z-index: 4; }
.CodeMirror-lines { cursor: text; }
.CodeMirror pre { border-radius: 0px; border-width: 0px; background: 0px 0px; font-family: inherit; font-size: inherit; margin: 0px; white-space: pre; overflow-wrap: normal; color: inherit; z-index: 2; position: relative; overflow: visible; }
.CodeMirror-wrap pre { overflow-wrap: break-word; white-space: pre-wrap; word-break: normal; }
.CodeMirror-code pre { border-right: 30px solid transparent; width: fit-content; }
.CodeMirror-wrap .CodeMirror-code pre { border-right: none; width: auto; }
.CodeMirror-linebackground { position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; z-index: 0; }
.CodeMirror-linewidget { position: relative; z-index: 2; overflow: auto; }
.CodeMirror-wrap .CodeMirror-scroll { overflow-x: hidden; }
.CodeMirror-measure { position: absolute; width: 100%; height: 0px; overflow: hidden; visibility: hidden; }
.CodeMirror-measure pre { position: static; }
.CodeMirror div.CodeMirror-cursor { position: absolute; visibility: hidden; border-right: none; width: 0px; }
.CodeMirror div.CodeMirror-cursor { visibility: hidden; }
.CodeMirror-focused div.CodeMirror-cursor { visibility: inherit; }
.cm-searching { background: rgba(255, 255, 0, 0.4); }
@media print {
  .CodeMirror div.CodeMirror-cursor { visibility: hidden; }
}


:root {
  --control-text-color: #777;
  --select-text-bg-color: rgba(223, 197, 223); /*#7e66992e;*/
  --search-select-bg-color: #8163bd;

  /* side bar */
  --side-bar-bg-color: rgb(255, 255, 255);
  --active-file-text-color: #8163bd;
  --active-file-bg-color: #e9e4f0;
  --item-hover-bg-color: #e9e4f0;
  --active-file-border-color: #8163bd;

  --title-color: #6c549c;
  --strong-color: #3b3b3b;
  --font-sans-serif: "Ubuntu", "Source Sans Pro", sans-serif !important;
  --font-monospace: "Fira Code", "Roboto Mono", monospace !important;

  --base-font: -apple-system, "Noto Sans", "Helvetica Neue", Helvetica,
    "Nimbus Sans L", Arial, "Liberation Sans", "Noto Sans CJK SC", "PingFang SC",
    "Hiragino Sans GB", "Source Han Sans SC", "Source Han Sans CN",
    "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti",
    SimHei, "WenQuanYi Zen Hei Sharp", "Ubuntu", "Source Sans Pro", sans-serif;
  --title-font: "EB Garamond", Georgia, "Nimbus Roman No9 L",
    "Noto Serif CJK SC", "Songti SC", "Source Han Serif SC",
    "Source Han Serif CN", STSong, "AR PL New Sung", "AR PL SungtiL GB", NSimSun,
    SimSun, "TW\-Sung", "WenQuanYi Bitmap Song", "AR PL UMing CN",
    "AR PL UMing HK", "AR PL UMing TW", "AR PL UMing TW MBE", PMingLiU, MingLiU,
    "Ubuntu", "Source Sans Pro", serif;
  --em-font: "EB Garamond", Georgia, "Nimbus Roman No9 L",
    "Noto Serif CJK SC" ， "Songti SC", "Source Han Serif SC",
    "Source Han Serif CN", STSong, "AR PL New Sung", "AR PL SungtiL GB", NSimSun,
    SimSun, "TW\-Sung", "WenQuanYi Bitmap Song", "AR PL UMing CN",
    "AR PL UMing HK", "AR PL UMing TW", "AR PL UMing TW MBE", PMingLiU, MingLiU,
    "Ubuntu", "Source Sans Pro", serif;
  --quota-font: "EB Garamond", Baskerville, Georgia, "Liberation Serif",
    "TW-Kai", "Kaiti SC", STKaiti, "AR PL UKai CN", "AR PL UKai HK",
    "AR PL UKai TW", "AR PL UKai TW MBE", "AR PL KaitiM GB", KaiTi, KaiTi_GB2312,
    DFKai-SB, "TW\-Kai", serif;
  --monospace: "Cascadia code", "Sarasa Term SC", Monaco, "Deja Vu Sans Mono",
    Consolas, "Lucida Console", "Andale Mono", "Fira Code", "Roboto Mono",
    monospace, Courier;

  --purple-1: #8163bd;
  --purple-2: #79589f;
  --purple-3: #fd5eb8;
  --purple-4: #bb60d5;
  --purple-light-1: rgba(99, 99, 172, 0.05);
  --purple-light-2: rgba(99, 99, 172, 0.1);
  --purple-light-3: rgba(99, 99, 172, 0.2);
  --purple-light-4: rgba(129, 99, 189, 0.3);
  --purple-light-5: #e9e4f0;
  --purple-light-6: rgba(129, 99, 189, 0.7);

  --shadow: var(--purple-light-3) 0px 5px 10px;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-rendering: optimizelegibility;
  -webkit-font-smoothing: initial;
}

body {
  color: #34495e;
  -webkit-font-smoothing: antialiased;
  line-height: 1.6rem;
  letter-spacing: 0;
  margin: 0;
  overflow-x: hidden;
}

/* 页边距 和 页面大小 */
#write {
  font-family: var(--base-font);
  /* max-width: 914px; */
  margin: 0 auto;
  padding: 60px;
  padding-bottom: 100px;
}

#write p {
  line-height: 1.6rem;
  word-spacing: 0.05rem;
}

/* #write ol li {
    padding-left: 0.5rem;
} */

#write > ul:first-child,
#write > ol:first-child {
  margin-top: 30px;
}

body > *:first-child {
  margin-top: 0 !important;
}

body > *:last-child {
  margin-bottom: 0 !important;
}

a {
  color: var(--purple-1);
  text-decoration: none;
}
#write a:hover {
  border-bottom: 1px solid var(--purple-1);
  color: var(--purple-1);
  text-decoration: none;
}
.md-content {
  color: var(--purple-light-6);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  position: relative;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  /* font-weight: bold; */
  font-weight: 400;
  line-height: 1.4;
  cursor: text;
  color: var(--title-color);
  font-family: var(--title-font);
}

h1 tt,
h1 code {
  font-size: inherit !important;
}
h2 tt,
h2 code {
  font-size: inherit !important;
}
h3 tt,
h3 code {
  font-size: inherit !important;
}
h4 tt,
h4 code {
  font-size: inherit !important;
}
h5 tt,
h5 code {
  font-size: inherit !important;
}
h6 tt,
h6 code {
  font-size: inherit !important;
}

h1 {
  padding-bottom: 0.4rem;
  font-size: 2.2rem;
  line-height: 1.3;
}
h1 {
  text-align: center;
  padding-bottom: 0.3em;
  font-size: 2.2em;
  line-height: 1.2;
  margin: 1.6em auto 1em;
}
h1:after {
  content: "";
  display: block;
  margin: 0.2em auto 0;
  width: 100px;
  height: 2px;
  border-bottom: 2px solid var(--title-color);
}

h2 {
  margin: 1.4em auto 0.8em;
  padding-left: 10px;
  line-height: 1.4;
  font-size: 1.8em;
  border-left: 9px solid var(--title-color);
  border-bottom: 1px solid var(--title-color);
}
h3 {
  font-size: 1.5rem;
  margin: 1.2em auto 0.5em;
}
h4 {
  font-size: 1.3rem;
}
h5 {
  font-size: 1.2rem;
}
h6 {
  font-size: 1.1rem;
}

p,
blockquote,
ul,
ol,
dl,
table {
  margin: 0.8em 0;
}

li > ol,
li > ul {
  margin: 0 0;
}

/* horizontal rule */
hr {
  margin: 16px 0;
  border: 0;
  border-top: 1px solid #eee;
}

li p.first {
  display: inline-block;
}

/* ul,
ol {
    padding-left: 30px;
} */

ul:first-child,
ol:first-child {
  margin-top: 0;
}

ul:last-child,
ol:last-child {
  margin-bottom: 0;
}

/* 引用 */
blockquote {
  /* margin-left: 1rem; */
  border-left: 0.3rem solid var(--purple-light-4);
  border-radius: 0.4rem;
  padding: 10px 15px;
  color: #777;
  background-color: var(--purple-light-1);
  box-shadow: var(--purple-light-2);
  font-family: var(--quota-font);
}

/* 表格 */
table {
  padding: 0;
  word-break: initial;
}

table tr {
  border-top: 1px solid #dfe2e5;
  margin: 0;
  padding: 0;
}

/* 表格 背景色 */
table tr:nth-child(2n),
thead {
  background-color: var(--purple-light-1);
}
#write table thead th {
  background-color: var(--purple-light-2);
}

table tr th {
  font-weight: 500;
  border: 1px solid #dfe2e5;
  border-bottom: 0;
  text-align: left;
  margin: 0;
  padding: 6px 13px;
}

table tr td {
  border: 1px solid #dfe2e5;
  text-align: left;
  margin: 0;
  padding: 6px 13px;
}

table tr th:first-child,
table tr td:first-child {
  margin-top: 0;
}

table tr th:last-child,
table tr td:last-child {
  margin-bottom: 0;
}

/* 粗体 */
#write strong {
  padding: 0 2px;
  /* color: var(--purple-1); */
  color: var(--strong-color);
  font-weight: 600;
  font-family: var(--em-font);
}

/* 斜体 */
#write em {
  padding: 0 5px 0 2px;
  font-family: var(--em-font);
  /* font-style: normal;
  color: #4abdeb; */
}

/* inline code */
#write code,
tt {
  padding: 2px 4px;
  border-radius: 2px;
  font-family: var(--monospace);
  font-size: 0.92rem;
  color: var(--purple-4);
  background-color: rgba(99, 99, 172, 0.05);
}

tt {
  margin: 0 2px;
}

#write .md-footnote {
  background-color: #f8f8f8;
  color: var(--purple-4);
}

/* heighlight. */
#write mark {
  background-color: rgba(251, 211, 234, 0.6);
  border-radius: 2px;
  padding: 2px 4px;
  margin: 0 2px;
}

#write del {
  padding: 1px 2px;
}

.md-task-list-item > input {
  margin-left: -1.3em;
}

@media print {
  html {
    font-size: 0.9rem;
  }

  table,
  pre {
    page-break-inside: avoid;
  }

  pre {
    word-wrap: break-word;
  }
}

#write pre.md-meta-block {
  padding: 1rem;
  font-size: 85%;
  line-height: 1.45;
  background-color: #f7f7f7;
  border: 0;
  border-radius: 3px;
  color: #777777;
  margin-top: 0 !important;
}

.mathjax-block > .code-tooltip {
  bottom: 0.375rem;
}

/* 图片 */
.md-image > .md-meta {
  border-radius: 3px;
  font-family: var(--monospace);
  padding: 2px 0 0 4px;
  font-size: 0.9em;
  color: inherit;
}
/* 图片靠左显示 */
p .md-image:only-child {
  width: auto;
  text-align: left;
  margin-left: 2rem;
}
.md-tag {
  color: inherit;
}

/* 默认有阴影 */
#write img {
  box-shadow: var(--shadow);
  border-radius: 5px;
  max-width: 914px;
}

/* 写![no-shadow...]() 使图片去掉阴影 */
img[alt|="no-shadow"] {
  box-shadow: none !important;
}

/* 写![normal...]() 使图片去掉所有效果 */
img[alt|="normal"] {
  margin: 0 !important;
  box-shadow: none !important;
}

#write a.md-toc-inner {
  line-height: 1.6;
  white-space: pre-line;
  border-bottom: none;
  font-size: 0.9rem;
}

#typora-quick-open {
  border: 1px solid #ddd;
  background-color: #f8f8f8;
}

#typora-quick-open-item {
  background-color: #fafafa;
  border-color: #fefefe #e5e5e5 #e5e5e5 #eee;
  border-style: solid;
  border-width: 1px;
}

#md-notification:before {
  top: 10px;
}

header,
.context-menu,
.megamenu-content,
footer {
  font-family: var(--font-sans-serif);
}

.file-node-content:hover .file-node-icon,
.file-node-content:hover .file-node-open-state {
  visibility: visible;
}

.md-lang {
  color: #b4654d;
}

.html-for-mac .context-menu {
  --item-hover-bg-color: #e6f0fe;
}

/* 代码框 */
/* CodeMirror 3024 Day theme */

/* 代码段 背景 */
pre {
  --select-text-bg-color: rgba(223, 197, 223) !important;
}

/* border and bg */
.md-fences {
  border: 1px solid #e7eaed;
  border-radius: 5px;
  background: #fdfdfd !important;
}
#write pre.md-fences {
  /* padding: 1rem 0.5rem 1rem; */
  display: block;
  -webkit-overflow-scrolling: touch;
  box-shadow: var(--shadow);
}

.cm-s-inner {
  padding: 0.25rem;
  border-radius: 0.25rem;
}

.cm-s-inner.CodeMirror,
.cm-s-inner .CodeMirror-gutters {
  /* background-color: #f8f8f8 !important; */
  color: #3a3432 !important;
  border: none;
}

.cm-s-inner .CodeMirror-gutters {
  color: #6d8a88;
}

/* 光标 */
.cm-s-inner .CodeMirror-cursor {
  border-left: solid thin var(--title-color) !important;
}

.cm-s-inner .CodeMirror-linenumber {
  padding: 0 0.1rem 0 0.3rem;
  color: #b8b5b4;
}

.cm-s-inner .CodeMirror-line::selection,
.cm-s-inner .CodeMirror-line::-moz-selection,
.cm-s-inner .CodeMirror-line > span::selection,
.cm-s-inner .CodeMirror-line > span::-moz-selection,
.cm-s-inner .CodeMirror-line > span > span::selection,
.cm-s-inner .CodeMirror-line > span > span::-moz-selection {
  background: var(--purple-light-1);
}

.cm-s-inner span.cm-comment {
  color: #cdab53;
}

.cm-s-inner span.cm-string,
.cm-s-inner span.cm-string-2 {
  color: #f2b01d;
}

.cm-s-inner span.cm-number {
  color: #a34e8f;
}

.cm-s-inner span.cm-variable {
  color: #3a3a3a;
}

.cm-s-inner span.cm-variable-2 {
  color: #01a0e4;
}

.cm-s-inner span.cm-def {
  /* color: #e8bbd0; */
  color: #e2287f;
}

.cm-s-inner span.cm-operator {
  color: #ff79c6;
}

.cm-s-inner span.cm-keyword {
  color: #db2d20;
}

.cm-s-inner span.cm-atom {
  color: #a34e8f;
}

.cm-s-inner span.cm-meta {
  color: inherit;
}

.cm-s-inner span.cm-tag {
  color: #db2d20;
}

.cm-s-inner span.cm-attribute {
  color: #01a252;
}

.cm-s-inner span.cm-qualifier {
  color: #388aa3;
}

.cm-s-inner span.cm-property {
  color: #01a252;
}

.cm-s-inner span.cm-builtin {
  color: #388aa3;
}

.cm-s-inner span.cm-variable-3,
.cm-s-inner span.cm-type {
  color: #ffb86c;
}

.cm-s-inner span.cm-bracket {
  color: #3a3432;
}

.cm-s-inner span.cm-link {
  color: #a34e8f;
}

.cm-s-inner span.cm-error {
  background: #db2d20;
  color: #5c5855;
}

/* .md-fences.md-focus .cm-s-inner .CodeMirror-activeline-background {
  background: var(--purple-light-2);
} */

.cm-s-inner .CodeMirror-matchingbracket {
  text-decoration: underline;
  color: #a34e8f !important;
}

#fences-auto-suggest .active {
  background: #ddd;
}

/* language tip */
#write .code-tooltip {
  bottom: initial;
  top: calc(100% - 1px);
  /* background: #f7f7f7; */
  border: 1px solid #ddd;
  /* border-top: 0; */
}

.auto-suggest-container {
  border-color: #b4b4b4;
}

.auto-suggest-container .autoComplt-hint.active {
  background: #b4b4b4;
  color: inherit;
}

/* task list */
#write .md-task-list-item > input {
  -webkit-appearance: initial;
  display: block;
  position: absolute;
  border: 1px solid #b4b4b4;
  border-radius: 0.25rem;
  margin-top: 0.1rem;
  margin-left: -1.8rem;
  height: 1.2rem;
  width: 1.2rem;
  transition: background 0.3s;
}

#write .md-task-list-item > input:focus {
  outline: none;
  box-shadow: none;
}

#write .md-task-list-item > input:hover {
  background: #ddd;
}

#write .md-task-list-item > input[checked]::before {
  content: "";
  position: absolute;
  top: 20%;
  left: 50%;
  height: 60%;
  width: 2px;
  transform: rotate(40deg);
  background: #333;
}

#write .md-task-list-item > input[checked]::after {
  content: "";
  position: absolute;
  top: 46%;
  left: 25%;
  height: 30%;
  width: 2px;
  transform: rotate(-40deg);
  background: #333;
}

#write .md-task-list-item > p {
  transition: color 0.3s, opacity 0.3s;
}

#write .md-task-list-item.task-list-done > p {
  color: #b4b4b4;
  text-decoration: line-through;
}

#write .md-task-list-item.task-list-done > p > .md-emoji {
  opacity: 0.5;
}

#write .md-task-list-item.task-list-done > p > .md-link > a {
  opacity: 0.6;
}

/* sidebar and outline */
.pin-outline .outline-active {
  color: var(--active-file-text-color);
}

.file-list-item {
  border-bottom: 1px solid;
  border-color: var(--purple-light-5);
}

.file-list-item-summary {
  font-weight: 400;
}

.file-list-item.active {
  color: var(--active-file-text-color);
  background-color: var(--purple-light-5);
}

.file-tree-node.active > .file-node-background {
  background-color: var(--purple-light-5);
  font-weight: 500;
}

.file-tree-node.active > .file-node-content {
  color: var(--active-file-text-color);
  font-weight: 500;
}

.file-node-content {
  color: #5e676d;
}

.sidebar-tabs {
  border-bottom: none;
}
.sidebar-tab.active {
  font-weight: 400;
}
.info-panel-tab-border {
  color: var(--purple-1);
}

.sidebar-content-content {
  font-size: 0.9rem;
}

/* 搜索 */
.ty-file-search-match-text {
  background-color: var(--purple-light-4);
}
.md-search-hit {
  background-color: var(--purple-light-4);
  contain: style;
}

element.style {
  width: calc(100% - 18px);
}
#file-library-search-input:focus {
  border-color: var(--purple-1);
}
.code-tooltip .ty-input:focus,
input:focus {
  border-color: var(--purple-1);
}



</style>
</head>
<body class='typora-export os-windows'>
<div id='write'  class=''><h1><a name="guidebook" class="md-header-anchor"></a><span>GuideBook</span></h1><blockquote><p><span>这本指导手册</span><em><span>(GuideBook)</span></em><span>将帮助你了解缙云中学校园语言研究所移动端</span><u><span>ChinaRed</span></u><span>的使用方法。</span></p><p><span>在此鸣谢：</span></p><p><span>-Hao Liu </span></p><p><span>由他撰写的Typora Theme为该页面的样式提供了支持</span></p><p><span>-Wendao Lee </span></p><p><span>本手册的主要撰写者；研究所技术组成员</span></p><p><span>-Shallow Dream  </span></p><p><span>研究所技术组组长；移动端项目负责人</span></p></blockquote><div class='md-toc' mdtype='toc'><p class="md-toc-content" role="list"><span role="listitem" class="md-toc-item md-toc-h1" data-ref="n84"><a class="md-toc-inner" href="#guidebook">GuideBook</a></span><span role="listitem" class="md-toc-item md-toc-h4" data-ref="n96"><a class="md-toc-inner" href="#10-移动端简介">1.0 移动端简介</a></span><span role="listitem" class="md-toc-item md-toc-h5" data-ref="n97"><a class="md-toc-inner" href="#11-什么是chinared">1.1 什么是ChinaRed</a></span><span role="listitem" class="md-toc-item md-toc-h5" data-ref="n108"><a class="md-toc-inner" href="#12-chinared的功能">1.2 ChinaRed的功能</a></span><span role="listitem" class="md-toc-item md-toc-h5" data-ref="n117"><a class="md-toc-inner" href="#13-注意事项">1.3 注意事项</a></span><span role="listitem" class="md-toc-item md-toc-h4" data-ref="n127"><a class="md-toc-inner" href="#20-使用帮助">2.0 使用帮助</a></span><span role="listitem" class="md-toc-item md-toc-h5" data-ref="n129"><a class="md-toc-inner" href="#21-界面">2.1 界面</a></span><span role="listitem" class="md-toc-item md-toc-h5" data-ref="n145"><a class="md-toc-inner" href="#22-侧边栏">2.2 侧边栏</a></span><span role="listitem" class="md-toc-item md-toc-h5" data-ref="n156"><a class="md-toc-inner" href="#23-关于channel">2.3 关于Channel</a></span><span role="listitem" class="md-toc-item md-toc-h4" data-ref="n161"><a class="md-toc-inner" href="#30-其他">3.0 其他</a></span></p></div><h4><a name="10-移动端简介" class="md-header-anchor"></a><span>1.0 移动端简介</span></h4><h5><a name="11-什么是chinared" class="md-header-anchor"></a><span>1.1 什么是ChinaRed</span></h5><p><code>ChinaRed</code><span>是由</span><u><span>缙云中学校园语言研究所</span></u><span>技术组通过第三方工具制作的一款安卓app，其目的是为了方便手机端用户能够使用</span><u><span>研究所</span></u><span>提供的些许服务。</span></p><p><span>这些服务包括：</span></p><ul><li><span>访问研究所官网，了解相关动态</span></li><li><span>查询研究所收录的各类词汇</span></li><li><span>使用第三方提供的Web服务</span></li></ul><p><span>而</span><code>ChinaRed</code><span>则是该app的名称，同样也是该app的命名版本号。之所以如此取名，是因为它的开发与发布第一个测试版本都在2020年春节前后这一时间段内，故而我们命名它为</span><code>ChinaRed</code><span>，意为</span><code>“中国红”</code><span>。</span></p><h5><a name="12-chinared的功能" class="md-header-anchor"></a><span>1.2 ChinaRed的功能</span></h5><ul><li class='md-task-list-item task-list-item task-list-not-done' ><input type='checkbox' /><p><span>便捷用户访问</span><a href='https://www.otterdaily.cn/Index.html'><span>缙云中学校园语言研究所官网</span></a></p></li><li class='md-task-list-item task-list-item task-list-not-done' ><input type='checkbox' /><p><span>查询研究所收录的词汇</span></p></li><li class='md-task-list-item task-list-item task-list-not-done' ><input type='checkbox' /><p><span>通过Channel板块使用第三方提供的Web服务</span></p></li></ul><p><span>值得一提的是，ChinaRed的体积非常的小。因此，我们建议您一直保留该app在您的手机里，权当做个放在手机里的纪念品。。</span></p><h5><a name="13-注意事项" class="md-header-anchor"></a><span>1.3 注意事项</span></h5><ol start='' ><li><strong><span>使用ChinaRed的大部分服务需要联网</span></strong><span>。受限于第三方工具提供的支持与研究所各项服务的本身性质，ChinaRed的大部分服务都需要在网络环境才能使用。尽管ChinaRed会缓存一些加载过的内容，使得您可以在无网情况下浏览已经缓存的内容。但是ChinaRed的核心内容</span><em><span>如词汇查询</span></em><span>等都需要联网。</span></li><li><strong><span>ChinaRed有一项无用的使用权限：定位。还请您在安装好ChinaRed之后在手机设置中将它关闭</span></strong><span>——虽然它默认是关闭的。这是使用第三方工具造成的一项冗杂权限要求，尽管我们保证该第三方的可信度，但是为了规避隐私泄露风险，还请您在安装后检查该项权限是否开启，如已经开启，请将它关闭。</span></li><li><span>ChinaRed的绝大多数服务基于Github的Pages服务支持。受到网络情况及Pages服务本身在国内的状态的影响，</span><strong><span>您有时在使用ChinaRed时会遇见极长的加载时间的情况。还请您能够见谅。</span></strong></li><li><span>缙云中学校园语言研究所技术组对于ChinaRed及其提供保留最终解释权与所有权。研究所可以在通过官方公众号或官网提前告知的情况下停止ChinaRed的维护及其提供的服务。</span></li></ol><h4><a name="20-使用帮助" class="md-header-anchor"></a><span>2.0 使用帮助</span></h4><p><span>我们在下方列出了一些可能能够帮助到您的条目。</span></p><h5><a name="21-界面" class="md-header-anchor"></a><span>2.1 界面</span></h5><p><span>当您打开ChinaRed时，展现在您面前的将会是这个界面：</span></p><p><img src="../pic/guide1.jpg" alt="guide1" style="zoom:25%;" /></p><p><span>其中，在</span><code>“检索汇总”</code><span>与</span><code>“官网主页”</code><span>下方的大量留白处为</span><code>显示页面</code><span>，它是您浏览的所有内容的加载区域，换句话讲，您所想要浏览的内容都会在这里显示。</span></p><p><span>而上方的深红色区域则为功能板块：</span></p><p><img src="../pic/guide2.jpg" alt="guide2" style="zoom: 33%;" /></p><p><span>通过点击不同的图标，您可以使用不同的功能。</span></p><p><span>下面我们简单列出了各个不同的图标对应的功能：</span></p><ul><li><p><img src="../pic/guide-search.jpg" referrerpolicy="no-referrer" alt="search"><span> </span><strong><span>搜索键</span></strong><span>，您可以通过点击它展开</span><u><span>搜索框</span></u><span>进行相关信息的搜索。</span></p><p><span>搜索键是整个</span><code>ChinaRed</code><span>的核心内容。</span></p></li><li><p><img src="../pic/guide-ce.jpg" referrerpolicy="no-referrer" alt="guide-ce"><strong><span>侧边栏</span></strong><span>。点击侧边栏，将会展开ChinaRed的侧边栏，里面包含一些额外服务。我们会在下方</span><em><u><span>2.2侧边栏</span></u></em><span>一节中简单介绍这些服务。</span></p></li><li><p><img src="../pic/guide-fu.jpg" referrerpolicy="no-referrer" alt="guide-fu"><strong><span>辅助栏</span></strong><span>。点击它将会弹出简陋的辅助栏。里面包含退出程序等简陋的功能按键。</span></p></li></ul><h5><a name="22-侧边栏" class="md-header-anchor"></a><span>2.2 侧边栏</span></h5><p><span>点开侧边栏，您将会看到三个选项栏：</span></p><p><img src="../pic/guide4.jpg" alt="guide4" style="zoom: 33%;" /></p><p><span>这三个栏目的功能分别为：</span></p><ul><li><code>帮助GuideBook</code><span>，打开本帮助手册。</span><em><span>需要联网或已预先有过缓存</span></em><span>。</span></li><li><code>加公众号QQ</code><span>，打开手机QQ并进入到您与研究所的聊天界面。您可以通过它来快速添加我所公众号QQ或者与我们联系。</span></li><li><code>Channel</code><span>，进入Channel页面，使用由第三方提供的Web服务。</span></li></ul><h5><a name="23-关于channel" class="md-header-anchor"></a><span>2.3 关于Channel</span></h5><p><strong><span>Channel是由研究所设计的一个Web服务板块</span></strong><span>。它的用处为：</span><strong><u><span>拓展ChinaRed的功能</span></u></strong><span>，方便同学使用由第三方提供的一些Web服务。</span></p><p><span>简单地举个例子：年初新冠疫情初发时，我们在Channel里设置了由丁香园提供的疫情状况查询服务。这样子，一些使用ChinaRed的同学就可以在使用ChinaRed时或者突然想知道目前疫情状况时，能有个快捷的查询路口，而不需要专门上网去搜找或者下载新的App。</span></p><p><span>我们必须承认：Channel确实是一个鸡肋的功能，食之无味而又弃之可惜。但是出于提高ChinaRed本身价值的考虑，我们最终还是决定保留Channel板块。</span></p><pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="markdown"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="markdown"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 4px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-em">*你知道吗？</span></span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-em">事实上Channel在刚开始立项的时候，由于立项组的粗心大意少打了一个'n'，使得该项目名变成了国际知名奢侈品香奈儿的品牌名。时隔几月后才被立项组成员发现并且纠正。</span></span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 67px;"></div><div class="CodeMirror-gutters" style="display: none; height: 67px;"></div></div></div></pre><h4><a name="30-其他" class="md-header-anchor"></a><span>3.0 其他</span></h4><p><span>目前该手册暂时只有这些内容。</span></p><p><span>若您有其他疑惑，还请联系我所官方QQ号咨询。我们会根据您的反馈不断更新该帮助手册的内容。</span></p><blockquote><p><span>《GuideBook》</span></p><p><span>最后更新时间:20/10/28</span></p></blockquote><p>&nbsp;</p></div>
</body>
</html>